import L from 'leaflet'
import "leaflet/dist/leaflet.css"
import 'leaflet-polylinedecorator'
import { antPath } from 'leaflet-ant-path'
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster"
// import './src.js'
export default class Map {
    static _mapContainer = null;
    // 生成地图
    /**
     * 
     * @param domId  // 地图实例dom
     * @param mapLayer  //地图数据库信息
     * @param zoom     //地图当前层级
     * @param minZoom  // 最小层级
     * @param maxZoom   // 最大层级
     * @param center    // 中心坐标 [00,00]
     * @returns 
     */
    __create_map(domId, mapLayer, zoom, minZoom, maxZoom, center = [28, 131]) {
        this._mapContainer = L.map(domId, {
            zoom: zoom ? zoom : 6,
            minZoom: minZoom ? minZoom : 6,
            maxZoom: maxZoom ? maxZoom : 11,
            center: center,//中心坐标点
            zoomControl: false,
            attributionControl: false,
            crs: L.CRS.EPSG3857
        })
        this._mapContainer._onResize();

        let titleLayer = mapLayer

    
        L.tileLayer(`${titleLayer}/{z}/{x}/{y}`).addTo(this._mapContainer)

        return this._mapContainer
    }
    // icon标记
    __create_icon_marker(options) {
        let filterOptions = {}
        for (let i in options) {
            if (i !== 'latlngs') {
                filterOptions[i] = options[i]
            }
        }

        const icon_markers = L.marker(options.latlngs, { icon: L.icon(filterOptions) }).addTo(this._mapContainer)
        return { _map: this._mapContainer, icon_markers }
    }
    // icon_div标记
    __create_iconDiv_marker(latlngs, options) {
        const icon_div_markers = L.marker(latlngs,
            {
                icon: L.divIcon({ className: options.className || '', html: options.html || '', iconAnchor: options.iconAnchor })
            }).addTo(this._mapContainer)
        return { _map: this._mapContainer, icon_div_markers }
    }
    // 圆点marker
    __create_circle_marker(latitude, longitude, options) {
        const circle_markers = L.circleMarker(new L.LatLng(latitude, longitude), {
            color: options.color, //线颜色
            weight: options.weight, //线宽度
            opacity: options.opacity, //透明度
            fillColor: options.fillColor, //填充色
            fillOpacity: options.fillOpacity, //填充透明度
            radius: options.radius, //半径
        }).addTo(this._mapContainer)

        return { _map: this._mapContainer, circle_markers }
    }
    // 点动画
    __create_blink_marker(point, property) {
        // 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串
        var tempDivEle = document.createElement("div");
        var divEle = document.createElement("div");
        var spanEl = document.createElement("span");
        var aEl = document.createElement("a");
        tempDivEle.append(divEle);
        divEle.append(spanEl);
        spanEl.append(aEl);
        // 设置上基础的样式
        spanEl.classList.add("pulse-icon");
        aEl.classList.add("dive-icon");
        // 主体颜色
        if (property) {
            if (property.color) {
                spanEl.style.backgroundColor = property.color;
                if (!property.diveColor) {
                    aEl.style.boxShadow = "0 0 6px 2px " + property.color;
                }
            }
            // 标记大小
            if (property.iconSize) {
                spanEl.style.width = property.iconSize[0] + "px";
                spanEl.style.height = property.iconSize[1] + "px";
            }
            // 发散的color
            if (property.diveColor) {
                // 发散的重度
                if (property.level) {
                    aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.diveColor;
                } else {
                    aEl.style.boxShadow = "0 0 6px 2px " + property.diveColor;
                }
            }
            // 发散的重度
            if (property.level) {
                if (property.diveColor) {
                    aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.diveColor;
                } else if (property.color) {
                    aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px " + property.color;
                } else {
                    aEl.style.boxShadow = "0 0 " + (property.level * 3) + "px " + property.level + "px red";
                }
            }

            // 闪烁的速度
            if (property.speedTime) {
                aEl.style.setProperty("animation", "pulsate " + property.speedTime + "s infinite")
            }
        }
        var myIcon = L.divIcon({ className: 'my-div-icon', html: tempDivEle.innerHTML });
        var marker = L.marker(point, { icon: myIcon, title: property.title });
        return marker;
    }
    // 
    /** 绘制线条
     * @param latlngs 坐标点组 [[],[]]
     * @param options 
     *         color 颜色
     *         dashArray    线条虚线程度 0 为实线
     *         weight   线条粗细
     *         opacity  透明度 1.0
     * @returns 
     */
    __create_line(latlngs, options) {
        const default_line = L.polyline(latlngs, {
            color: options.color,
            dashArray: options.dashArray,
            weight: options.weight,
            opacity: options.opacity ? options.opacity : 1,
        }).addTo(this._mapContainer)
        return { _map: this._mapContainer, default_line }
    }
    // ant-path
    __create_antpath_line(latlngs) {
        const path = antPath(latlngs, {
            "paused": false,  //暂停  初始化状态
            "reverse": false, //方向反转
            "delay": 1000,  //延迟，数值越大效果越缓慢
            "dashArray": [10, 20], //间隔样式
            "weight": 5, //线宽
            "opacity": 0.5, //透明度
            "color": "#0000FF", //颜色
            "pulseColor": "#FFFFFF" //块颜色
        })
        const antpath_polyLines = path.addTo(this._mapContainer)
        return { _map: this._mapContainer, antpath_polyLines }
    }

    /**  绘制箭头
     * __create_arrow_line
     * @param lines 
     * @param options
     *        offset 模式符号的偏移位置
     *        repeat 模式符号的重复间隔
     *        pixelSize 箭头大小
     *        weight   箭头粗细
     *        color 箭头颜色
     * @returns 
     */
    __create_arrow_line(lines, options) {
        const arrowHead = L.polylineDecorator(lines, {
            patterns: [
                {
                    // endOffset: '100%',
                    offset: options.offset ? options.offset : '30%',
                    repeat: options.repeat ? options.repeat : 90,
                    symbol: L.Symbol.arrowHead({
                        pixelSize: options.pixelSize ? options.pixelSize : 15,
                        polygon: false,
                        pathOptions: {
                            stroke: true,
                            weight: options.weight ? options.weight : 2,
                            color: options.color ? options.color : 'rgba(42, 207, 226, 1)'
                        }
                    })
                }
            ]
        }).addTo(this._mapContainer)
        return { _map: this._mapContainer, arrowHead }
    }

    /** 绘制区域
  * @param latlngs 坐标点组 [[],[]]
  * @param options 
  *         color 颜色
  *         dashArray    线条虚线程度 0 为实线
  *         weight   线条粗细
  *         opacity  透明度 1.0
  * @returns 
  */
    __create_polygon(latlngs, options) {
        const zone_markers = L.polygon(latlngs, {
            color: options.color,
            dashArray: options.dashArray,
            weight: options.weight,
            opacity: options.opacity ? options.opacity : 1,
        }).addTo(this._mapContainer)
        return { _map: this._mapContainer, zone_markers }
    }

    
    //聚合
    __create_cluster() {
        const markers_cluster = L.markerClusterGroup({
            spiderfyShapePositions: function (count, centerPt) {
                var distanceFromCenter = 35,
                    markerDistance = 45,
                    lineLength = markerDistance * (count - 1),
                    lineStart = centerPt.y - lineLength / 2,
                    res = [],
                    i;
                res.length = count;
                for (i = count - 1; i >= 0; i--) {
                    res[i] = new Point(centerPt.x + distanceFromCenter, lineStart + markerDistance * i);
                }
                return res;
            },
            singleMarkerMode: false,
            spiderLegPolylineOptions: { weight: 10, color: 'red', opacity: 1 },
            spiderfyDistanceMultiplie: 100
        })
        //循环将点marker添加进markerCluserGroup
        json.map((item, index) => {
            if (index < 1000) {
                //LatLng表示具有特定纬度和经度的地理点
                var marker = L.marker(new L.LatLng(item.latitude, item.longitude), { title: item.name })
                //绑定点击弹窗事件
                marker.bindPopup(item.name)
                //将点marker添加进markerCluserGroup
                markers_cluster.addLayer(marker)
            }
        })
        markers_cluster.addTo(this._mapContainer)
        // state._map.addLayer(state.markers_cluster)
        return { _map: this._mapContainer, markers_cluster }
    }
    // 自定义popup弹出窗口内容
    __create_custom_popup(markInfo, popupContent) {
        const custom_popup = L.popup({ minWidth: '380px', closeButton: false })
            .setLatLng(markInfo.latlng)
            .setContent(popupContent)
            .openOn(this._mapContainer);
        return { _map: this._mapContainer, custom_popup };
    }
    // 自定义飞行路线
    __create_flying_way(data) {
        const flying_way = L.migrationLayer({
            map: this._mapContainer,
            data,
            pulseRadius: 30,
            pulseBorderWidth: 3,
            arcWidth: 1,
            arcLabel: true,
            arcLabelFont: '10px sans-serif',
        }).addTo(this._mapContainer)
        return { _map: this._mapContainer, flying_way }
    }
}